<template>
	<view class="content">
		
		<!-- 消息类型切换按钮 -->
		<view class="message-option-view">
			<uni-row>
				<uni-col :span="6">
					<view class="option-view" @tap="onOptionTap('like')">
						<view class="option-circle shadow-light"
							:class="mode == 'like' ? 'option-like-select' : 'option-like'">
							<!-- 圆中的图标 -->
							<view class="option-icon iconfont">&#xe721;</view>
							<!-- 圆右上角消息数量圆点 -->
							<view class="option-count-dot" 
								v-if="getTypeCount('like', true) != 0 && mode!='like'">{{ getTypeCount("like", true) }}</view>
						</view>
						<view class="option-title">喜欢</view>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="option-view" @tap="onOptionTap('follow')">
						<view class="option-circle shadow-light"
							:class="mode == 'follow' ? 'option-follow-select' : 'option-follow'">
							<view class="option-icon iconfont">&#xe80d;</view>
							<!-- 圆右上角消息数量圆点 -->
							<view class="option-count-dot"
								v-if="getTypeCount('follow', true) != 0 && mode!='follow'">{{ getTypeCount("follow", true) }}</view>
						</view>
						<view class="option-title">粉丝</view>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="option-view" @tap="onOptionTap('comment')">
						<view class="option-circle shadow-light"
							:class="mode == 'comment' ? 'option-comment-select' : 'option-comment'">
							<view class="option-icon iconfont">&#xe89c;</view>
							<!-- 圆右上角消息数量圆点 -->
							<view class="option-count-dot"
								v-if="getTypeCount('comment', true) != 0 && mode!='comment'">{{ getTypeCount("comment", true) }}</view>
						</view>
						<view class="option-title">嘿文评论</view>
					</view>
				</uni-col>
				<uni-col :span="6">
					<view class="option-view" @tap="onOptionTap('reply')">
						<view class="option-circle shadow-light"
							:class="mode == 'reply' ? 'option-reply-select' : 'option-reply'">
							<view class="option-icon iconfont">&#xe7a7;</view>
							<!-- 圆右上角消息数量圆点 -->
							<view class="option-count-dot"
								v-if="getTypeCount('reply', true) != 0 && mode!='reply'">{{ getTypeCount("reply", true) }}</view>
						</view>
						<view class="option-title">回复</view>
					</view>
				</uni-col>
			</uni-row>
			<view class="message-option-bottom-view">
				<view class="message-option-bottom">
					<text @tap="onUpdateAllRead">清空未读</text>
					<text class="message-option-del" @tap="onDelAll">删除所有消息</text>
				</view>
			</view>
		</view>
		
		<!-- 消息容器 -->
		<view class="message-content">
			<u-empty mode="data" class="empty-view"
				icon="http://cdn.uviewui.com/uview/empty/data.png" 
				text="还没有消息哦"
				v-if="getTypeCount(mode) == 0">
			</u-empty>
			<view class="message shadow-light flipInX-d3s" 
				v-for="(message, i) in messages" 
				:key="i"
				v-if="mode == '' || message.type == mode">
				<!-- 未读消息左上角的红点 -->
				<view class="message-new" v-if="message.isRead=='false'"></view>
				<!-- 消息发出人的名称 -->
				<text class="primary" @tap="onUserTap(message.sendFromEmail)">
					{{ message.username }}
				</text>
				<!-- 消息内容 -->
				<text>
					{{ typeMsg[message.type] }}
				</text>
				<!-- 触发消息的嘿文标题（仅在粉丝类型消息下不显示） -->
				<text class="primary" v-if="message.type!='follow'" @tap="onHeiTap(message.heiId)">
					{{ message.title }}
				</text>
				
				<text v-if="message.type=='reply'">
					{{typeMsg["reply2"] }}
				</text>
				<view class="message-time-view">
					<text class="message-time">{{ format(message.createTime) }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMessage,
		deleteMessage,
		updateMessageRead,
		updateAllMessageRead
	} from "@/network/MessageApi.js";
	export default {
		data() {
			return {
				messages: [],
				typeMsg: {
					"like": " 喜欢了你的嘿文 ",
					"follow": " 关注了你",
					"comment": " 评论了你的嘿文 ",
					"reply": " 回复了你在嘿文 ",
					"reply2": " 中的评论"
				},
				
				mode: "like",
			}
		},

		onShow() {
			this.refreshData();
		},
		
		onPullDownRefresh() {
			this.refreshData();
		},
		
		methods: {
			/**
			 * 刷新消息
			 */
			refreshData: function() {
				getMessage().then(data => {
					this.messages = data.content;
					// 停止下拉刷新
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
					uni.showModal({
						title: "获取消息失败",
						content: err
					});
				});
			},
			
			/**
			 * 消息选项点击事件。切换消息类型，同时将上一个类型的消息全部已读
			 * @param {Object} option
			 */
			onOptionTap: function(option) {
				// 先将上一类型的消息全部已读
				this.readByType(this.mode);
				this.mode = option;
				// 将当前类型的消息已读并上传服务器
				this.updateRead(this.mode);
			},
			
			/**
			 * 消息中用户名点击事件
			 * @param {Object} email
			 */
			onUserTap: function(email) {
				// 跳转用户信息页
				uni.navigateTo({
					url: "/pages/user/user?email=" + email
				});
			},
			
			/**
			 * 消息中嘿文点击事件
			 * @param {Object} heiId
			 */
			onHeiTap: function(heiId) {
				uni.navigateTo({
					url: "/pages/hei/hei?heiId=" + heiId
				});
			},
			
			/**
			 * 根据类型来确定当前类型消息数量
			 * @param {Object} type
			 * @param {boolean} notRead 是否只统计未读消息
			 */
			getTypeCount: function(type, notRead = false) {
				let count = 0;
				for (let i = 0; i < this.messages.length; i++) {
					let message = this.messages[i];
					if (message.type == type) {
						if (notRead) {
							if (message.isRead == "false") {
								count++;
							}
						} else {
							count++;
						}
					}
				}
				return count;
			},
			
			/**
			 * 设置某一类型的消息全为已读，仅设置本地变量
			 * @param {Object} type
			 */
			readByType: function(type = "") {
				for (let i = 0; i < this.messages.length; i++) {
					let message = this.messages[i];
					// type 为空默认设置所有类型
					if (type == "") {
						if (message.isRead == "false") {
							this.messages[i].isRead = "true";
						}
					} else {
						// type 不为空，设置指定类型
						if (message.type == type && message.isRead == "false") {
							this.messages[i].isRead = "true";
						}
					}
				}
			},
			
			/**
			 * 设置某一类型的消息全为已读，上传服务器
			 * @param {Object} type
			 */
			updateRead: function(type) {
				let ids = [];
				for (let i = 0; i < this.messages.length; i++) {
					let message = this.messages[i];
					if (message.type == type && message.isRead == "false") {
						ids.push(message.messageId);
					}
				}
				
				// 已读消息大于0，提交服务器
				if (ids.length > 0) {
					updateMessageRead(ids);
				}
			},
			
			/**
			 * 清空未读消息
			 */
			onUpdateAllRead: function() {
				let that = this;
				uni.showModal({
					title: "温馨提示",
					content: "确定清空所有未读消息吗",
					success: function(res) {
						if (res.confirm) {
							that.readByType();
							updateAllMessageRead();
						}
					}
				});
			},
			
			/**
			 * 删除所有消息
			 */
			onDelAll: function() {
				let that = this;
				uni.showModal({
					title: "温馨提示",
					content: "确定删除所有消息吗",
					success: function(res) {
						if (res.confirm) {
							deleteMessage().then(data => {
								that.messages = [];
							}).catch(err => {
								uni.showModal({
									title: "删除失败",
									content: err
								});
							});
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.message-option-view {
		background-color: white;
		box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
	}
	
	.option-view {
		text-align: center;
		height: 200rpx;
		color: white;
		padding-top: 18%;
	}
	
	.option-circle {
		background-color: green;
		border-radius: 99px;
		width: 120rpx;
		height: 120rpx;
		line-height: 120rpx;
		margin-left: 18%;
		position: relative;
	}
	
	.option-count-dot {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background-color: #fa3534;
		border-radius: 99px;
		color: white;
		font-size: 22rpx;
		font-weight: bold;
		position: absolute;
		top: 0px;
		right: 0px;
	}
	
	.option-icon {
		font-size: 88rpx;
	}
	
	.option-title {
		color: var(--titleColor);
		margin-top: 10rpx;
		font-size: 28rpx;
	}
	
	.message-option-bottom-view {
		position: relative;
		height: 60rpx;
	}
	
	.message-option-bottom {
		position: absolute;
		font-size: 24rpx;
		color: var(--contentColor);
		right: 20rpx;
	}
	
	.message-option-del {
		margin-left: 30rpx;
	}
	
	.option-like {
		background-image: linear-gradient(10deg, $u-error, $u-error-light);
	}
	.option-follow {
		background-image: linear-gradient(10deg, $u-warning, $u-warning-light);
	}
	
	.option-comment {
		background-image: linear-gradient(10deg, $u-primary, $u-primary-light);
	}
	
	.option-reply {
		background-image: linear-gradient(10deg, $u-success, $u-success-light);
	}
	
	.option-like-select {
		background-image: linear-gradient(90deg, $u-error, $u-error-dark);
	}
	.option-follow-select {
		background-image: linear-gradient(90deg, $u-warning, $u-warning-dark);
	}
	
	.option-comment-select {
		background-image: linear-gradient(90deg, $u-primary, $u-primary-dark);
	}
	
	.option-reply-select {
		background-image: linear-gradient(90deg, $u-success, $u-success-dark);
	}
	
	.message-content {
		padding: 20rpx;
	}
	
	.message {
		padding: 20rpx;
		background-color: white;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		position: relative;
	}
	
	.message-time-view {
		position: relative;
		height: 40rpx;
	}
	
	.message-time {
		position: absolute;
		right: 0rpx;
		color: var(--divideColor);
		font-size: 24rpx;
	}
	
	.message-new {
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		background-color: $u-error-dark;
		border-radius: 99px;
		top: -10rpx;
		left: -10rpx;
	}
	
	.empty-view {
		padding-top: 10%;
	}
</style>
